<template>
    <div class="login-container">
        <div class="login-form">
            <!-- 左侧公司介绍 -->
            <div class="company-info">
                <h1>Hello World</h1>
                <p>more and more comany info...more and more comany info...more and more comany info...more and more
                    comany info...more and more comany info...</p>
            </div>
            <!-- 右侧表单信息 -->
            <form>
                <!-- 选择登录方式 -->
                <div class="login-type">
                    <div @click="changeLoginType('username')">账号登录</div>
                    <div @click="changeLoginType('phone')">手机号登录</div>
                </div>
                <!-- 使用用户名登录 -->
                <div class="username-login" v-if="isUsernameLogin">
                    <!-- username -->
                    <el-input v-model="username" class="w-50 m-2" size="large" placeholder="请输入用户名" :prefix-icon="User" />
                    <el-input v-model="password" type="password" class="w-50 m-2" size="large" placeholder="请输入密码"
                        :prefix-icon="Key" />
                    <div class="check-code">
                        <el-input v-model="checkcode" class="w-50 m-2" size="large" placeholder="请输入验证码"
                            style="width: 120px" />
                        <img :src="backend" @click="resetImg" style="height: 38px;" alt="checkcode">
                    </div>
                    <div class="button-group">
                        <el-button type="primary" @click="checkLogin">登录</el-button>
                        <el-button>注册</el-button>
                    </div>
                    <div class="checkbox-password">
                        <el-checkbox v-model="isCheck" @change="checkBoxChange" label="记住密码" size="large" />
                    </div>
                </div>
                <!-- 使用手机号登录 -->
                <div class="username-login" v-if="!isUsernameLogin">
                    <!-- username -->
                    <el-input v-model="phone" class="w-50 m-2" size="large" placeholder="请输入手机号" :prefix-icon="User" />
                    <el-input v-model="password" type="password" class="w-50 m-2" size="large" placeholder="请输入密码"
                        :prefix-icon="Key" />
                    <!-- <div class="check-code">
                                        <el-input v-model="checkcode" class="w-50 m-2" size="large" placeholder="请输入验证码"
                                            style="width: 120px" />
                                        <el-button>发送验证码</el-button>
                                    </div> -->
                    <div class="check-code">
                        <el-input v-model="checkcode" class="w-50 m-2" size="large" placeholder="请输入验证码"
                            style="width: 120px" />
                        <img :src="backend" @click="resetImg" style="height: 38px;" alt="checkcode">
                    </div>
                    <div class="button-group">
                        <el-button type="primary" @click="checkLogin">登录</el-button>
                        <el-button>注册</el-button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import { Message, User } from '@element-plus/icons-vue'
import { Key } from '@element-plus/icons-vue'
import baseUrl from '@/utils/baseurl'
import { ElMessage, FormInstance } from 'element-plus'
import request from '@/utils/request'
import { encode, decode } from 'js-base64'


let isUsernameLogin = ref(true); //是否用户名登录
let isPhoneLogin = ref(false);  //是否手机号登录
let phone = ref(""); // 手机号
let username = ref(""); //用户名
let password = ref(""); //密码
let checkcode = ref(""); //验证码
let isCheck = ref(false); //是否记住密码

const router = useRouter()

// 获取后端验证码地址
let backend = ref(baseUrl + "/user/verifyCode/?" + new Date());

// 改变登录方式
let changeLoginType = (str: string) => {
    if (str == "username") {
        isUsernameLogin.value = true;
        isPhoneLogin.value = false;
    }
    if (str == "phone") {
        isUsernameLogin.value = false;
        isPhoneLogin.value = true;
    }

}
// 点击验证码改变验证码
const resetImg = () => {
    backend.value = baseUrl + "/user/verifyCode/?" + new Date();

}

onMounted(() => {
    window.localStorage.removeItem("userToken");
    window.localStorage.removeItem("userId");
    queryLocalUserInfor();
})

// 登录
const checkLogin = async () => {
    await request.post(`/user/login`, {
        phone: phone.value,
        username: username.value,
        password: password.value,
        code: checkcode.value

    }).then(res => {
        if (res.code == 200) {
            // 在浏览器中存放token
            window.localStorage.setItem("userToken", res.data.token);
            window.localStorage.setItem("userId", res.data.id);
            // 登录如果没有填记住密码，就清除信息
            if (isCheck.value == false) localStorage.removeItem("localUser");

            //路由跳转
            router.push('/');
        } else {
            ElMessage({
                message: res.msg,
                type: 'error',
            })
        }
    })

}

// 记住密码
const checkBoxChange = () => {
    // 判断用户是否选择了记住密码
    if (isCheck.value) {
        // 暂存用户信息
        const param = {
            username: encode(username.value),
            password: encode(password.value)
        }
        // 存放用户信息到本地浏览器
        localStorage.setItem("localUser", JSON.stringify(param));
    } else {
        // 用户没有选择记住密码,所以清除用户信息,让下次检测不到
        localStorage.removeItem("localUser");
    }
}

// 获取密码
const queryLocalUserInfor = () => {
    if (localStorage.getItem("localUser")) {
        // 如果有信息，就说明用户上次登录是需要记住密码的
        isCheck.value = true;

        // 获取用户保存在本地浏览器的加密信息
        const userInfo: any = localStorage.getItem("localUser");
        const userData = JSON.parse(userInfo);
        // 解密加密信息到文本框
        username.value = decode(userData.username);
        password.value = decode(userData.password);
    }



}
</script>
    
<style scoped lang="less">
.login-container {
    width: 100wh;
    height: 100vh;
    background-color: #ededed;
    position: relative;
}

// 左侧公司介绍CSS
.company-info {
    width: 440px;
    height: 540px;
    background-image: url('../../src/assets/jeecg_ad.93fbfa48.png');
    background-repeat: no-repeat;
    background-position: right top;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;

    p {
        text-indent: 2em;
        line-height: 40px;
    }

    h1 {
        margin-left: 30px;
    }
}

.login-type {
    width: 100%;
    display: flex;
    font-size: 20px;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
    margin: 20px 0;
}

// 注册表单部分
.login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 750px;
    height: 540px;
    background-color: #fff;
    margin: 0 auto;
    display: flex;

    form {
        width: 300px;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 10px;
        display: flex;

        flex-direction: column;

        .el-input {
            margin: 15px 0;
        }

        position: relative;

    }

    .button-group {
        display: flex;
        position: absolute;
        bottom: 20px;

        .el-button {
            width: 100%;
        }
    }
}

.check-code {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    img {
        margin-left: 5px;
    }
}

.checkbox-password {
    display: flex;
    height: 25px;
    align-items: flex-end;
}
</style>